<style scoped lang="less">
  .change-box{
    padding-top: 50px;
    width: 500px;
    margin:0 auto;
    overflow: hidden;
    li{
      padding-top: 60px;
      .change-item{
        padding:10px;
        background: #fff;
        .icon-box{
          padding-top: 3px;
        }
        .ipt{
          margin-left: 30px;
        }
        input{
          background: transparent;
          border: none;
          outline: none;
          width: 100%;
          line-height: 30px;
        }
      }
      .get-code{
        width:120px;
        color: #258AFE;
        line-height: 50px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        background: #fff;
      }
      .code-box{
        margin-right: 150px;
      }
    }
  }
  .sure-change{
    line-height: 50px;
    width: 500px;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    font-size: 18px;
    background: url("../../../static/image/ts_2.png");
    background-size: 100% 100%;
    margin:60px auto;
    cursor: pointer;
  }
  .change-success{
    padding: 300px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    .sbtn{
      margin: 20px auto 0;
      line-height: 40px;
      width: 100px;
      background: #1293FF;
      cursor: pointer;
      color: #fff;
    }
  }
</style>

<style lang="less">
  .change-box{
    .change-item{
      .ipt{
        input{
          font-size: 16px;
        }
      }
    }
  }
</style>
<template>
  <div id="change">
    <div v-if="!changeSuccess">
      <div class="change-box">
        <ul>
          <li>
            <div class="change-item">
              <div class="left icon-box">
                <img src="../../../static/image/e_3.png">
              </div>
              <div class="ipt">
                <input type="password" v-model="oldPass" placeholder="旧密码">
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <li>
            <div class="change-item">
              <div class="left icon-box">
                <img src="../../../static/image/e_4.png">
              </div>
              <div class="ipt">
                <input type="password" v-model="newPass" placeholder="新密码 6-16位">
              </div>
              <div class="clear"></div>
            </div>
          </li>
          <li>
            <div class="change-item">
              <div class="left icon-box">
                <img src="../../../static/image/e_08.png">
              </div>
              <div class="ipt">
                <input type="password" v-model="aginPass" placeholder="确认密码">
              </div>
              <div class="clear"></div>
            </div>
          </li>
        </ul>
      </div>
      <div @click="changePass" class="sure-change">
        确认修改
      </div>
    </div>
    <div v-else class="change-success">
      <div>
        <img src="../../../static/image/e_0.png">
      </div>
      <div>
        修改密码成功！
      </div>
      <div @click="$router.push('/Login/LoginByPass')" class="sbtn">
        重新登录
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalChangePass',
    data () {
      return {
        changeSuccess: false,
        codeText: '获取验证码',
        hasSend: false,
        oldPass: '',
        newPass: '',
        aginPass: ''
      }
    },
    methods: {
      changePass: function () {
        let that = this
        let oldPass = that.oldPass
        let newPass = that.newPass
        let aginPass = that.aginPass
        if (oldPass === '') {
          that.$vux.toast.show({
            text: '请输入旧密码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (newPass === '') {
          that.$vux.toast.show({
            text: '请输入新密码',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (newPass.length < 6 || newPass.length > 16) {
          that.$vux.toast.show({
            text: '密码要求6-16位',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        if (aginPass !== newPass) {
          that.$vux.toast.show({
            text: '两次输入的密码不一致',
            width: '200px',
            position: 'middle',
            type: 'text'
          })
          return false
        }
        that.$chaos.ajax({
          url: '/User/updataUserLoginPass',
          userinfo: true,
          data: {
            old_pass: oldPass,
            pass: newPass,
            pass_bak: aginPass
          },
          callback: function (type) {
            if (type === 'success') {
              that.changeSuccess = true
              that.mobile = ''
              that.code = ''
              that.oldPass = ''
              that.newPass = ''
              that.aginPass = ''
            }
          }
        })
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '修改密码',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.$emit('changeCurrent', 8)
      this.setCrumbs()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>
